/*
 * @Author: your name
 * @Date: 2021-04-20 20:40:43
 * @LastEditTime: 2021-04-27 00:09:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \fantasticit\src\pages\MessageBoard\index.tsx
 */
import {observer} from 'mobx-react-lite'

import React,{useEffect} from 'react';
// 样式
import styles from './MessageBoard.less';
// 引入for-editor
import Editor from 'for-editor';
//引入拆分组件--评论
import Comment from "../../components/comment";
//引入列表组件
import Msgcommentlist from "../../components/msgcommentlist";
//引入推荐阅读组件
import Homelist from "../../components/homelist";
import useStore from "../../context/useStore"
import comment from '../../components/comment';
import { message} from 'antd';

const MessageBoard: React.FC = () => {

  //结构useStore
  let {msgcommentID,msgcommentlist,comments} = useStore()

  useEffect(() => {
  //  获取留言
  msgcommentID.getMsgcomment();
  //  获取留言列表
  msgcommentlist.getMsgcommentList(msgcommentID.getcommentId.id);
}, [])

useEffect(() => {
  // 获取留言列表
  msgcommentlist.getMsgcommentList(msgcommentID.getcommentId.id)
}, [msgcommentID.getcommentId.id])
//  console.log(msgcommentID.getcommentId.id)
//定义评论按钮
const comment=(content: string, name: string, email: string)=>{
  if (!/^\w+@[a-z0-9]+\.[a-z]{2,4}$/.test(email)) {
    message.warning('输入合法邮箱地址，以便在收到回复时邮件通知');
    return
  }
  //调用评论的方法
  const obj = {content:content,email:email,hostId:msgcommentID.msgcommentlist.id,name:name,url:'/page/msgboard'}
  comments.getComment(obj)
}
  return (
    <div className={styles.MessageBoard}>
      <div className={styles.wrapper}>
        <div className={styles.container}>
          <div className={styles.ULM98bSKdc}>
            <div className={styles.markdown}>
  <h2>{msgcommentID.getcommentId.name}</h2>
            </div>
          </div>
        </div>
        <div className={styles.E3CUDg1PsccFXoieOZb0}>
          <div className={styles.wOfHAlAtGbTTLqtUO}>
          <h2 className={styles.h2}>评论</h2>
            <div className={styles.context}>
              <Comment comment={comment}/>
            </div>
            <div className={styles.context}>
              <Msgcommentlist/>
            </div>
            
            <div>
            <h2 className={styles.h2}>推荐阅读</h2>
            <Homelist />
            </div>

          </div>
        </div>
      </div>
    </div>
  );
};
export default  observer(MessageBoard);
